<%--
  Created by IntelliJ IDEA.
  User: 86176
  Date: 2022/2/26
  Time: 9:11
  To change this template use File | Settings | File Templates.
--%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <base href="<%=basePath%>"/>
    <title>Title</title>
    <!--引入EasyUI的资源-->
    <link rel="stylesheet" type="text/css" href="static/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="static/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="static/themes/color.css">
    <link rel="stylesheet" type="text/css" href="static/themes/demo.css">
    <script type="text/javascript" src="static/jquery.min.js"></script>
    <script type="text/javascript" src="static/jquery.easyui.min.js"></script>
    <!--声明js代码域-->
    <script type="text/javascript">
        /*******************初始化加载角色信息的DataGrid***************************/
        $(function (){
            //初始化DataGrid
            $("#roleDataGrid").datagrid({
                url:"role/roleInfo",//设置远程加载数据的地址
                pagination:true,//在表格中显示分页工具栏，只有将属性值设置为true，就会发起Ajax分页请求获取要加载的数据
                rownumbers:true,//显示行号
                pageNumber:1,//设置Ajax分页默认页码
                pageSize:2,//设置每页显示的数量
                pageList:[2,4,6],//设置每页数据量下拉框框中的数量
                toolbar:"#roleToolBar",//增加工具栏效果
                title:"查询结果",//显示标题
                checkOnSelect:false,//当用户仅在点击该复选框的时候才会被选中或取消
                columns:[[//设置表格的列以及每列和加载的数据的映射关系
                    {field:"aa",checkbox:true},//每列显示一个多选框的效果
                    {title:"角色编号",field:"rid",width:70},
                    {title:"角色名称",field:"rname"},
                    {title:"角色描述",field:"rdesc"},
                ]]
            })
        })
        /*******************增加角色***************************/
        $(function () {
            //给增加角色按钮增加单击事件
            $("#addRole").click(function () {
                //显示角色增加的对话框
                $("#addRoleDialog").dialog('open')
            })
            //给表单提交按钮增加单击事件
            $("#addRoleForm").click(function () {
                //获取当前角色分配的菜单Id
                var nodes = $('#menuTreeInfo').tree('getChecked', ['unchecked','indeterminate']);
                console.log(nodes)
                var mids="";
                if (nodes.length>0){
                    for(var i=0;i<nodes.length;i++){
                        mids+=nodes[i].id+",";
                    }
                }
                //将Id数据记录在表单的隐藏标签中
                $("#mids").val(mids);
                //异步提交表单
                $("#roleAddForm").form('submit',{
                    url:'role/roleAdd',
                    success:function (data) {
                        //转换
                        eval("var d="+data);
                        //判断
                        if (d.success){
                            $.messager.alert("提示","角色添加成功","info");
                            //关闭增加对话框
                            $("#addRoleDialog").dialog('close');
                            //重新加载角色的DataGrid数据
                            $("#roleDataGrid").datagrid('reload');
                        }else {
                            $.messager.alert("提示","角色添加失败","error")
                        }
                    }
                })
            })
        })
        /*******************修改角色***************************/
        $(function () {
            //给增加角色按钮增加单击事件
            $("#modifyRole").click(function () {
                //获取选择的行
                var trs=$("#roleDataGrid").datagrid('getChecked');
                console.log(trs)
                if (trs.length==1){
                    //显示角色增加的对话框
                    $("#modifyRoleDialog").dialog('open')
                    //将角色的菜单置为选择状态
                        //获取当前角色的菜单的ID
                        var mids=trs[0].mids;
                        //将菜单树中为角色的菜单置为选择状态
                        for (var i=0;i<mids.length;i++){
                            var node=$("#modifyMenuTreeInfo").tree('find',mids[i])
                            $("#modifyMenuTreeInfo").tree('check',node.target);
                        }
                    //回显
                    $("#roleModifyForm").form('load',trs[0]);
                }else if (trs.length>1){
                    $.messager.alert("提示","只能选择一个角色","info")
                }else{
                    $.messager.alert("提示","请选择一个角色","info")
                }
            })
            //给表单提交按钮增加单击事件
            $("#modifyRoleForm").click(function () {
                //获取当前角色分配的菜单Id
                var nodes = $('#modifyMenuTreeInfo').tree('getChecked', ['unchecked','indeterminate']);
                console.log(nodes)
                var mids="";
                if (nodes.length>0){
                    for(var i=0;i<nodes.length;i++){
                        mids+=nodes[i].id+",";
                    }
                }
                //将Id数据记录在表单的隐藏标签中
                $("#midsModify").val(mids)
                //异步提交表单
                $("#roleModifyForm").form('submit',{
                    url:'role/roleModify',
                    success:function (data) {
                        //转换
                        eval("var d="+data);
                        //判断
                        if (d.success){
                            $.messager.alert("提示","角色添加成功","info");
                            //关闭增加对话框
                            $("#modifyRoleDialog").dialog('close');
                            //重新加载角色的DataGrid数据
                            $("#roleDataGrid").datagrid('reload');
                        }else {
                            $.messager.alert("提示","角色添加失败","error")
                        }
                    }
                })
            })
        })
        /*******************删除角色***************************/
        $(function () {
            $("#deleteRole").click(function () {
                //获取要删除的角色
                var trs=$("#roleDataGrid").datagrid('getChecked');
                if (trs.length>0){
                    //获取要删除的角色的ID
                    var rids="";
                    for (var i=0;i<trs.length;i++){
                         rids+=trs[i].rid+",";
                    }
                    $.messager.confirm("删除提示","你确定要删除吗",function (r) {
                        if (r){
                            //发起Ajax请求
                            $.get("role/roleDelete",{rids:rids},function (data) {
                                //判断
                                if (data.success) {
                                    $.messager.alert("提示", "删除成功", "info");
                                    //重新加载数据
                                    $("#roleDataGrid").datagrid('reload');
                                } else {
                                    $.messager.alert("提示", "删除失败", "error");
                                }
                            })
                        }
                    })
                }else{
                    $.messager.alert("提示","请选择一个角色项","info")
                }
            })
        })
    </script>
</head>
<body>
    <!--创建修改角色的对话框-->
    <div id="modifyRoleDialog" class="easyui-dialog" title="修改角色" style="width:600px;height:520px;"
         data-options="iconCls:'icon-save',resizable:false,modal:true,closed:true">
        <!--声明对话框的布局，左边填写角色的信息，右边显示当前项目的树状菜单-->
        <div class="easyui-layout" data-options="fit:true">
            <div data-options="region:'west',split:false,title:'要修改的角色信息',collapsible:false" style="width:350px;padding:10px">
                <!--创建角色修改表单-->
                <form id="roleModifyForm" method="post">
                    <!--创建隐藏标签,记录修改的角色的菜单id-->
                    <input type="hidden" id="rid" name="rid">
                    <input type="hidden" id="midsModify" name="midsModify">
                    <!--角色名称-->
                    <div style="margin-bottom:20px;margin-top: 25px;text-align: center">
                        角色名称：
                        <input class="easyui-textbox" name="rname" iconWidth="28" style="width:200px;height:34px;padding:10px;">
                    </div>
                    <!--角色的描述-->
                    <div style="margin-bottom:20px;text-align: center">
                        角色描述：
                        <input class="easyui-textbox" name="rdesc" iconWidth="28" style="width:200px;height:34px;padding:10px;">
                    </div>
                    <!--操作按钮-->
                    <div style="margin-bottom: 20px;text-align: center">
                        <a href="javascript:void(0)" id="modifyRoleForm" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" style="width:120px">完成修改</a>
                    </div>
                </form>
            </div>
            <div data-options="region:'center',title:'选择角色的菜单'" style="padding:10px">
                <!--创建url组件加载所有的菜单信息-->
                <ul class="easyui-tree" id="modifyMenuTreeInfo" checkbox="true" data-options="url:'menu/menuAllInfo2'"></ul>
            </div>
        </div>
    </div>
    <!--创建增加角色的对话框-->
    <div id="addRoleDialog" class="easyui-dialog" title="增加角色" style="width:600px;height:520px;"
         data-options="iconCls:'icon-save',resizable:false,modal:true,closed:true">
        <!--声明对话框的布局，左边填写角色的信息，右边显示当前项目的树状菜单-->
        <div class="easyui-layout" data-options="fit:true">
            <div data-options="region:'west',split:false,title:'角色信息',collapsible:false" style="width:350px;padding:10px">
                <!--创建角色增加表单-->
                <form id="roleAddForm" method="post">
                    <!--创建隐藏标签,记录增加的角色的菜单id-->
                    <input type="hidden" id="mids" name="mids">
                    <!--角色名称-->
                    <div style="margin-bottom:20px;margin-top: 25px;text-align: center">
                        <input class="easyui-textbox" name="rname" prompt="请输入角色名称" iconWidth="28" style="width:300px;height:34px;padding:10px;">
                    </div>
                    <!--角色的描述-->
                    <div style="margin-bottom:20px;text-align: center">
                        <input class="easyui-textbox" name="rdesc" prompt="请输入角色描述" iconWidth="28" style="width:300px;height:34px;padding:10px;">
                    </div>
                    <!--操作按钮-->
                    <div style="margin-bottom: 20px;text-align: center">
                        <a href="javascript:void(0)" id="addRoleForm" class="easyui-linkbutton c3" style="width:120px">完成添加</a>
                    </div>
                </form>
            </div>
            <div data-options="region:'center',title:'当前系统菜单'" style="padding:10px">
                <!--创建url组件加载所有的菜单信息-->
                <ul class="easyui-tree" id="menuTreeInfo" checkbox="true" data-options="url:'menu/menuAllInfo2'"></ul>
            </div>
        </div>
    </div>
    <!--创建主持人面板组件-->
    <div id="p" class="easyui-panel" title="角色管理"
         style="width:1050px;height:500px;padding:10px;background:#fafafa;"
         data-options="iconCls:'icon-save',closable:false,
             collapsible:false,minimizable:false,maximizable:false">
        <!--创建主持人信息加载的DataGrid组件-->
        <table id="roleDataGrid"></table>
    </div>
    <!--创建主持人DataGrid的工具栏-->
    <div id="roleToolBar">
        <a id="addRole" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">添加角色</a>
        <a id="modifyRole" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">修改角色</a>
        <a id="deleteRole" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">删除角色</a>
    </div>
</body>
</html>
